<template>
    <div class="app-container" id="mmv-page" v-loading="loading">
        <MmvTitle title="方案配置"></MmvTitle>
        <el-form inline size="mini" label-width="130px">
            <el-form-item label="方案名称" required>
                <el-input v-model="planName" readonly></el-input>
            </el-form-item>
            <el-form-item label="品牌车系车型" required>
                <el-input :value="modelInfo" readonly placeholder="品牌车系车型">
                    <!-- <el-button slot="append" icon="el-icon-search" @click="showchexing=true"></el-button> -->
                </el-input>
                <!-- <el-select v-model="configurationId">
                    <template v-for="item in configurationList">
                        <el-option :key="item.configurationId" :label="`${item.modelName} - ${item.modelInfo}`" :value="item.configurationId"></el-option>
                    </template>
                </el-select> -->
                <el-dialog title="品牌车系车型" :visible.sync="showchexing" width="900px" append-to-body>
                    <el-table :data="configurationList">
                        <!-- <el-table-column label="编号" prop="configurationId"></el-table-column> -->
                        <!-- <el-table-column label="车型id" prop="modelId"></el-table-column> -->
                        <el-table-column label="车型信息" prop="modelInfo"></el-table-column>
                        <el-table-column label="车型名称" prop="modelName"></el-table-column>
                    </el-table>
                </el-dialog>
            </el-form-item>
        </el-form>
        <MmvTitle title="价格日历"></MmvTitle>
        <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{date, data}">
                <div class="rili" :class="{'is-selected':data.isSelected}">
                    <div>{{ data.day.split('-').slice(1).join('-') }}</div>
                    <div>￥{{superMmv(date, rilijiage[date.getDay()])}}</div>
                </div>
            </template>
        </el-calendar>
        <MmvTitle title="价格配置"></MmvTitle>
        <el-form label-width="130px" size="mini" label-position="top">
            <el-table :data="list">
                <el-table-column _min-width="220" label="周一">
                    <template slot-scope="{row}">
                        <el-input readonly :min="0" controls-position="right" size="mini" v-model="row.mondayPrice" placeholder="输入金额"></el-input>
                    </template>
                </el-table-column>
                <el-table-column _min-width="220" label="周二">
                    <template slot-scope="{row}">
                        <el-input readonly :min="0" controls-position="right" size="mini" v-model="row.tuesdayPrice" placeholder="输入金额"></el-input>
                    </template>
                </el-table-column>
                <el-table-column _min-width="220" label="周三">
                    <template slot-scope="{row}">
                        <el-input readonly :min="0" controls-position="right" size="mini" v-model="row.wednesdayPrice" placeholder="输入金额"></el-input>
                    </template>
                </el-table-column>
                <el-table-column _min-width="220" label="周四">
                    <template slot-scope="{row}">
                        <el-input readonly :min="0" controls-position="right" size="mini" v-model="row.thursdayPrice" placeholder="输入金额"></el-input>
                    </template>
                </el-table-column>
                <el-table-column _min-width="220" label="周五">
                    <template slot-scope="{row}">
                        <el-input readonly :min="0" controls-position="right" size="mini" v-model="row.fridayPrice" placeholder="输入金额"></el-input>
                    </template>
                </el-table-column>
                <el-table-column _min-width="220" label="周六">
                    <template slot-scope="{row}">
                        <el-input readonly :min="0" controls-position="right" size="mini" v-model="row.saturdayPrice" placeholder="输入金额"></el-input>
                    </template>
                </el-table-column>
                <el-table-column _min-width="220" label="周天">
                    <template slot-scope="{row}">
                        <el-input readonly :min="0" controls-position="right" size="mini" v-model="row.sundayPrice" placeholder="输入金额"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <!-- 收费项 -->
            <el-form inline size="mini" label-width="130px" label-position="top" required>
                <template v-for="item in chargeItemsList">
                    <el-form-item :label="item.chargeItemsName" :key="item.uniquenessCode" v-show="item.price">
                        <el-input readonly :min="0" controls-position="right" size="mini" style="width:200px" placeholder="输入金额" v-model="item.price"></el-input>
                    </el-form-item>
                </template>
            </el-form>
            <el-form-item label="节假日" v-show="holiday_checked.length"></el-form-item>
            <MmvTable readonly v-show="holiday_checked.length" :list="holiday_checked"></MmvTable>
            <el-form-item label="特殊日" v-show="specialDayList.length"></el-form-item>
            <MmvTable readonly v-show="specialDayList.length" :list="specialDayList" @close="onRemoveSpecialDay"></MmvTable>
            <el-form-item label="套餐方案"></el-form-item>
            <MmvTable readonly v-show="isSetMeal==1" :list="mealList" :showDate="false" text="折扣%" :max="100"></MmvTable>
        </el-form>
    </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvTable from './components/mmv-table.vue'
import MmvZhandian from './zhandian.vue'
import MmvKehu from './kehu.vue'
import * as planApi from "@/api/plan/luxuryPlan";
import map from 'lodash/map';
import forEach from 'lodash/forEach';

export default {
    components: {
        MmvTitle,
        MmvTable,
        MmvZhandian,
        MmvKehu,
    },
    props: {
        planId: String,
        form: {
            type: Object,
            required: true,
        },
    },
    // props: ['planId'],
    data() {
        return {
            loading: false,
            showchexing: false,
            planName: '', // 方案名称
            configurationId: '', // 品牌车系车型
            modelInfo: '',
            isSetMeal: 2, // 是否需要套餐方案
            // 是否显示弹出层
            open: false,
            openkehu: false, // 客户选择弹窗
            value: new Date(),
            list: [{
                mondayPrice: 0,
                tuesdayPrice: 0,
                wednesdayPrice: 0,
                thursdayPrice: 0,
                fridayPrice: 0,
                saturdayPrice: 0,
                sundayPrice: 0,
            }],
            yajin: [{
                yajinjine: '', // 押金金额
                baoxianjine: '', // 保险金额
                qitajine: '', // 其他金额
            }],
            // holiday_checked: [],
            checktable: [{}],
            checktableindex: 0,
            specialDayList: [],
            checklistteshutable: [{}],
            checklistteshutableindex: 0,
            radio: 0,
            mealList: [], // 套餐
            chargeItemsList: [], // 收费项
            configurationList: [], // 车型业务配置列表
            configurationquery: {
                pageNum: 1,
                pageSize: 10,
                modelName: null,
                configurationId: null
            },
            // 节假日
            holidayList: [], // 节假日列表
            holidayIds: [], // 选中的节假日id
            // 特殊日
            specialDayList: [], // 特殊日列表
        }
    },
    computed: {
        isEdit() {
            return !!this.form.planId;
        },
        rilijiage() {
            return {
                0: this.list[0].sundayPrice,
                1: this.list[0].mondayPrice,
                2: this.list[0].tuesdayPrice,
                3: this.list[0].wednesdayPrice,
                4: this.list[0].thursdayPrice,
                5: this.list[0].fridayPrice,
                6: this.list[0].saturdayPrice,
            }
        },
        /** 当前选中的节假日 */
        holiday_checked() {
            return this.holidayList.filter(val => this.holidayIds.indexOf(val.holidayId) >= 0)
        },
        checkboxlistdatepicker() {
            return this.holiday_checked.map(val => val.datepicker);
        },
        // 节假日/特殊日期费用费用(无值时传空集合)
        planHolidayBillingList() {
            const arr = [...this.holiday_checked, ...this.specialDayList];
            return map(arr, val => {
                return {
                    holidayId: val.holidayId, // 日期费用id(holidayType==1 必填)
                    holidayType: val.holidayId ? 1 : 2, // 费用类型（1节假日2特殊日期）
                    holidayName: val.label, // 日期名称
                    startTime: val.datepicker[0], // 开始时间（年月日）
                    endTime: val.datepicker[1], // 结束时间（年月日）
                    price: val.value || 0, // 费用
                }
            });
        },
        // 套餐信息
        planMealBillingList() {
            return map(this.mealList, val => {
                return {
                    mealId: val.mealId, // 套餐id
                    mealName: val.label, // 套餐名称
                    discount: val.value / 100 || 1,// 折扣取值0-1之间
                }
            });
        },
        // 费用项
        chargeItemsBillingList() {
            return map(this.chargeItemsList, val => {
                return {
                    chargeItemsName: val.chargeItemsName, // 收费项名称
                    uniquenessCode: val.uniquenessCode, // 收费项唯一编码
                    price: val.price || 0, // 费用
                }
            });
        },
        submitFormData() {
            return {
                planId: this.planId, // 方案ID
                planName: this.planName, // 方案名称
                configurationId: this.configurationId, // 车型配置id
                isSetMeal: this.isSetMeal, // 是否有套餐（1是2否）
                planStandardBillingList: { // 基础费用
                    sundayPrice: this.list[0].sundayPrice,  // 周日价格
                    mondayPrice: this.list[0].mondayPrice,  // 周一价格
                    tuesdayPrice: this.list[0].tuesdayPrice,  // 周二价格
                    wednesdayPrice: this.list[0].wednesdayPrice,  // 周三价格
                    thursdayPrice: this.list[0].thursdayPrice,  // 周四价格
                    fridayPrice: this.list[0].fridayPrice,  // 周五价格注
                    saturdayPrice: this.list[0].saturdayPrice,  // 周六价格
                },
                planHolidayBillingList: this.planHolidayBillingList, // 节假日/特殊日期费用费用(无值时传空集合)
                planMealBillingList: this.planMealBillingList, // 套餐信息
                chargeItemsBillingList: this.chargeItemsBillingList, // 费用项
            };
        },
    },
    watch: {
        checkboxlistdatepicker: {
            handler(val) {
                this.checktableindex += 1;
            },
            deep: true
        },
    },
    async mounted() {
        this.loading = true;
        await this.getholidayList(); // 获取节假日列表
        await this.getchargeItemsList(); // 获取收费项列表
        await this.getmealList(); // 获取套餐列表
        this.loading = false;
        if (this.planId) {
            console.log('走修改流程');
            await this.getData();
        }
        await this.getConfigurationList(); // 获取车型业务配置列表
    },
    methods: {
        /** 获取车型业务配置列表 */
        async getConfigurationList() {
            const result = await planApi.configurationList(this.configurationquery);
            this.configurationList = result.rows || [];
        },
        /** 获取节假日列表 */
        async getholidayList() {
            const result = await planApi.holidayList();
            this.holidayList = map(result.data, val => {
                return {
                    uuid: require('uuid').v4(),
                    label: val.holidayName,
                    value: val.price,
                    holidayId: val.holidayId,
                    holidayName: val.holidayName,
                    price: null,
                    datepicker: [val.startTime, val.endTime],
                }
            })
        },
        /** 获取收费项列表 */
        async getchargeItemsList() {
            const result = await planApi.chargeItemsList();
            this.chargeItemsList = result.data;
        },
        /** 获取套餐列表 */
        async getmealList() {
            const result = await planApi.mealList();
            console.log(result)
            this.mealList = result.data.map(val => {
                return {
                    uuid: require('uuid').v4(),
                    label: val.mealName,
                    value: val.discount,
                    mealId: val.mealId,
                }
            });
        },
        /** 新增特殊日 */
        addTeshuri() {
            this.specialDayList.push({
                uuid: require('uuid').v4(),
                label: '特殊日',
                value: null,
                canEditLabel: true,
                canClose: true,
                datepicker: [new Date(), new Date()],
            })
        },
        /** 移除特殊日 */
        onRemoveSpecialDay(item, index) {
            this.specialDayList.splice(index, 1);
        },
        /** 日历价格显示计算器 */
        superMmv(date, price) {
            // 计算出的价格
            let _price = price;
            function mmv(value) {
                const _date = new Date(value);
                return new Date(_date.getFullYear(), _date.getMonth() + 1, _date.getDate()).getTime();
            }
            // 日历当前格子时间戳
            const time = mmv(date);
            // 遍历节假日数组
            require('lodash/forEach')(this.holiday_checked, val => {
                const start_time = mmv(val.datepicker[0]);
                const end_time = mmv(val.datepicker[1]);
                if (time <= end_time && time >= start_time) {
                    _price = val.value;
                }
            });
            // 遍历特殊日数组
            require('lodash/forEach')(this.specialDayList, val => {
                let start_time = mmv(val.datepicker[0]);
                let end_time = mmv(val.datepicker[1]);
                if (time <= end_time && time >= start_time) {
                    _price = val.value;
                }
            });
            return _price;
        },
        submitForm() {
            console.log(this.submitFormData)
            return this.submitFormData;
        },
        async getData() {
            this.loading = true;
            await planApi.getPlan(this.planId).then(response => {
                this.planName = response.data.planName; // 方案名称
                this.modelInfo = response.data.modelInfo;
                this.configurationId = response.data.configurationId; // 品牌车系车型
                this.configurationquery.configurationId = response.data.configurationId;
                // 还原每周价格
                this.list[0] = Object.assign(this.list[0], response.data.standardVo);
                // 还原收费项
                forEach(response.data.chargeItemsVo, val => {
                    const item = this.chargeItemsList.find(_val => _val.uniquenessCode == val.uniquenessCode);
                    if (item) {
                        item.price = val.price;
                    }
                });
                // 还原节假日/特殊日价格
                forEach(response.data.holidayVo, val => {
                    // 还原节假日
                    if (val.holidayType == 1) {
                        this.holidayIds.push(val.holidayId);
                        // this.holiday_checked.push({
                        //     uuid: require('uuid').v4(),
                        //     label: val.holidayName,
                        //     value: val.price,
                        //     holidayId: val.holidayId,
                        //     datepicker: [new Date(val.startTime), new Date(val.endTime)],
                        // });
                    } else {
                        // 还原特殊日
                        this.specialDayList.push({
                            uuid: require('uuid').v4(),
                            label: val.holidayName,
                            value: val.price,
                            holidayId: val.holidayId,
                            canClose: true,
                            datepicker: [new Date(val.startTime), new Date(val.endTime)],
                        });
                    }
                });
                forEach(response.data.holidayVo, val => {
                    const item = this.holiday_checked.find(_val => _val.holidayId == val.holidayId);
                    if (item) {
                        item.label = val.holidayName;
                        item.value = val.price;
                        item.datepicker = [new Date(val.startTime), new Date(val.endTime)];
                    }
                });
                // 还原套餐方案
                this.isSetMeal = response.data.isSetMeal;
                forEach(response.data.mealVo, val => {
                    const item = this.mealList.find(_val => _val.mealId == val.mealId);
                    if (item) {
                        item.value = Math.floor(val.discount * 100);
                    }
                });
                this.loading = false;
            });
        },
        /** */
    },
}
</script>

<style lang="scss" scoped>
#mmv-page{
  ::v-deep .el-calendar-table .el-calendar-day{
   height:50px;
  }
}
.rili{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  // > div:nth-child(1){
  //   // margin-bottom: 5px;
  // }
}
</style>
